<!-- 首页的全部内容导航 -->
<template>
	<view class="navbar">
		<scroll-view class="scroll" scroll-x>
			<navigator :data-index="index"  :url="`/pages/actors/actors?id=${item.actors[0].id}`" class="scroll-nav" v-for="(item , index ) in list">
				<image lazy-load class="img" :src="item.actors[0].url"></image>
				<view class="nav-content">
					<view style="width: 40%;"></view>
					<view class="actor-title">{{item.actors[0].name}}</view>
				</view>
			</navigator>

		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 大类别的index值返回
	const emit = defineEmits("TagIndex")
	// 当前元素的index调色
	const curIndex = ref(0);
	defineProps({
		list: {
			type: Object,
			default: {}
		},
		url: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: '全部电影'
		}
	})


	// 获取当前元素的index值
	const onscrollIndex = (e) => {
		curIndex.value = e.currentTarget.dataset.index;
		emit("TagIndex", e.currentTarget.dataset.index)
		console.log("tags:", e.currentTarget.dataset.index);
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-bottom: 0;
		white-space: nowrap;

		.scroll ::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}

		scroll-view {
			white-space: nowrap;

			.scroll-nav {
				box-sizing: border-box;
				white-space: nowrap;
				display: inline-block;
				padding: 30rpx;
				font-size: 22rpx;
				border-radius: 15rpx;

				.img {
					position: absolute;
					top: 0;
					margin-left: -25rpx;
					width: 90rpx;
					height: 90rpx;
					border-radius: 15rpx;
				}

				.nav-content {
					box-sizing: border-box;
					border-radius: 15rpx;
					width: 230rpx;
					height: 131rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #1d1d1d;
					padding: 5rpx;


					.actor-title {
						box-sizing: border-box;
						width: 55%;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						padding: 5rpx;
						font-size: 20rpx;
					}

				}
			}
		}
	}
</style>